<template>
	<view>
		<!-- 标题栏 -->
		<ym-navbar title="我的" immersive :scrollTop="scrollTop"></ym-navbar>
		<view class="header u-f-ac">
			<template v-if="isLogin">
				<view class="avatar-box" @tap="$navigateTo('./info')">
					<image class="avatar" :src="userinfo.userPhoto" mode="aspectFill"></image>
					<image class="edit" src="../static/my/bianji@2x.png" mode="aspectFill"></image>
				</view>

				<view class="info">
					<view class="name">
						<text>{{ userinfo.userName }}</text>
						<view class="vip zwyHeight">VIP会员</view>
					</view>
					<view class="phone" v-if="userinfo.userPhone">{{ userinfo.userPhone }}</view>
					<view
						class="phone"
						v-else
						style="font-size: 30rpx;"
						@tap="$navigateTo('./info')"
					>
						完善信息领取优惠券
					</view>
				</view>
			</template>
			<template v-if="!isLogin">
				<view class="icon-2"></view>
				<view class="msg">
					<button
						v-if="canIUseGetUserProfile"
						class="get"
						open-type="getUserInfo"
						@tap="onGetUserInfo"
					>
						点击登录账户
					</button>
					<button v-else class="get" open-type="getUserInfo" @getuserinfo="onGetUserInfo">
						点击登录账户
					</button>
				</view>
			</template>
		</view>
		<view class="asset-info">
			<view>账户总额 (元)</view>
			<view class="u-f-jsb">
				<view class="num">
					{{ userinfo.accountAmount ? userinfo.accountAmount : 0 | toFixed2 }}
				</view>
				<view class="btn-charge u-f-ajc" @tap="gotoAccounDetail">
					<text v-if="isAndroid">优惠充值</text>
					<text v-else>查看账户</text>
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
				<!-- <view class="detail" @tap="gotoAccounDetail">查看账户详</view> -->
			</view>
		</view>

		<!-- 活动banner 展示 -->
		<view class="banner-wrap">
			<u-image
				src="http://www.tbuga.com/tubang_port/Public/Uploads/2020-11-23/5fbb17a1ab193.png"
				mode="widthFix"
				@tap="$navigateTo('../activePoster/fillCoupon')"
			></u-image>
			<u-image
				src="http://www.tbuga.com/tubang_port/Public/Uploads/2020-11-23/5fbb17f4d0aa1.png"
				mode="widthFix"
				@tap="$navigateTo('../activePoster/friendCoupon')"
			></u-image>
		</view>

		<view class="block-card u-f-ac">
			<block v-for="(item, index) in cardList" :key="index">
				<view class="card-item u-f-dc" hover-class="gray" @tap="clickMenu(item, index)">
					<image
						:src="item.icon"
						:style="{ width: item.imgW + 'rpx', height: item.img + 'rpx' }"
						mode="aspectFill"
					></image>
					<view>{{ item.title }}</view>
				</view>
			</block>
		</view>

		<view class="cell-card">
			<view class="cell-item u-f-jsb" hover-class="gray" @tap="showOffi">
				<view class="u-f-ac">
					<image class="icon" src="../static/my/guanzhu@2x.png" mode="aspectFill"></image>
					<text>关注公众号</text>
				</view>
				<image class="arrow-r" src="../static/my/arrow-r@2x.png" mode="aspectFill"></image>
			</view>
			<view class="cell-item u-f-jsb" hover-class="gray" @tap="$callTel('400-076-0666')">
				<view class="u-f-ac">
					<image class="icon" src="../static/my/kefu@2x.png" mode="aspectFill"></image>
					<view>400-076-0666</view>
				</view>
				<image class="arrow-r" src="../static/my/arrow-r@2x.png" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 登录弹窗，不在本页面显示，只用于触发授权后的操作 -->
		<sign-in :start-login="startLogin"></sign-in>
		<!-- <charge-notice ref="chargeNotice"></charge-notice> -->
	</view>
</template>

<script>
import ymNavbar from '@/components/ym-navbar/ym-navbar.vue';
export default {
	components: { ymNavbar },
	data() {
		return {
			startLogin: false, //是否已授权，开始进行登录操作
			cardList: [
				{
					icon: '../static/my/card-icon1@2x.png',
					title: '优惠券',
					path: '/pagesUc/user-ticket/index',
					imgW: 63,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon2@2x.png',
					title: '我的积分',
					path: '/pagesUc/user-points/index',
					imgW: 63,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon3@2x.png',
					title: '我的账单',
					path: '/pagesUc/user-account/balance',
					imgW: 75,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon4@2x.png',
					title: '收藏站点',
					path: '/pagesUc/user-collect/index',
					imgW: 65,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon5@2x.png',
					title: '加注记录',
					path: '/pagesUc/user-record/index',
					imgW: 63,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon6@2x.png',
					title: '活动中心',
					path: '/pagesAc/activityCenter/activityCenter',
					imgW: 58,
					imgH: 58
				},
				{
					icon: '../static/my/card-icon7@2x.png',
					title: '车辆管理',
					path: '/pagesUc/user-car/index',
					imgW: 71,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon8@2x.png',
					title: '团队管理',
					path: '/pagesUc/user-team/index',
					imgW: 55,
					imgH: 61
				},
				{
					icon: '../static/my/card-icon9@2x.png',
					title: '加注卡管理',
					path: '/pagesUc/user-account/cartList',
					imgW: 77,
					imgH: 61
				}
			],
			scrollTop: 0, // 滚动
			canIUseGetUserProfile: false // 判断是否可以使用 getUserProfile 接口
		};
	},
	computed: {
		//登录状态
		isLogin() {
			return this.$store.state.isLogin;
		},
		//用户信息
		userinfo() {
			let info = this.$store.state.userinfo;
			return JSON.parse(info || '{}');
		},
		//用户积分
		integral() {
			return this.$store.state.integral;
		},
		isAndroid() {
			return this.$store.isAndroid;
		}
	},
	watch: {
		isLogin(val) {
			if (val) this.getUserMsg();
		}
	},
	onLoad() {
		if (wx.getUserProfile) {
			this.canIUseGetUserProfile = true;
		}
	},
	onShow() {
		if (!this.$store.state.userinfo && this.$store.state.isLogin) {
			this.getUserMsg();
		}
	},
	onPullDownRefresh() {
		if (this.isLogin) {
			this.getUserMsg();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		//获取/刷新用户信息
		getUserMsg() {
			this.$http({
				url: this.$api.userUrl + 'getuserinfo',
				showLogin: 0
			}).then(res => {
				this.$store.commit('setUserinfo', JSON.stringify(res));
				this.$store.commit('setIntegral', parseInt(res.integral));
			});
		},
		//主要菜单，1-账户，2-积分
		mainMenu(code) {
			if (this.isLogin) {
				let path =
					code === 1 ? '/pagesUc/user-account/index' : '/pagesUc/user-points/index';
				this.$navigateTo(path);
			} else {
				this.$showToast('请登录后再进行此操作！');
			}
		},
		//点击菜单
		clickMenu(item, index) {
			if (!this.isLogin) {
				this.$showToast('请登录后再进行此操作！');
			} else if (item.title == '活动中心') {
				this.$showToast('活动中心暂未开启，敬请关注！');
			} else {
				this.$navigateTo(item.path);
			}
		},
		//显示关注公众号弹窗
		showOffi() {
			uni.showModal({
				content:
					'点击复制微信公众账号 AH-AUS32，在微信搜索中输入该账号即可搜索到公众号，点击关注即可。',
				confirmColor: '#FD9B0F',
				confirmText: '复制',
				success: rs => {
					if (rs.confirm) {
						uni.setClipboardData({
							data: 'AH-AUS32',
							success: () => {
								this.$successToast('复制成功');
							}
						});
					}
				}
			});
		},
		gotoAccounDetail() {
			if (!this.isLogin) {
				return this.$showToast('请登录后再进行此操作！');
			}
			uni.navigateTo({
				url: '/pagesUc/user-account/accountTotal'
			});
		},
		//登录授权
		onGetUserInfo(e) {
			this.startLogin = true;
		}
	}
};
</script>

<style lang="scss">
page {
	padding: 0 20rpx;
	box-sizing: border-box;
}
view {
	box-sizing: border-box;
}
.gray {
	background-color: #e6e6e6;
}
.nav {
	width: 100vw;
}
::v-deep .nav-title {
	color: #333 !important;
}
.header {
	padding: 40rpx 20rpx 80rpx 70rpx;
	margin-top: calc(88rpx + var(--status-bar-height));

	.icon-2 {
		width: 120rpx;
		height: 120rpx;
		border-radius: $border-radius-circle;
		margin-right: 30rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/40/rBCky15VxnWAPlelAAAL7dRmSaA245.png');
	}

	.msg {
		flex: 1;
		flex-direction: column;
		margin-left: 29rpx;
		.text {
			color: #333333;
		}
		.text.t1 {
			margin-top: 25rpx;
			font-family: $font-family-num;
		}
		.get {
			width: 240rpx;
			margin-left: -30rpx;
			font-size: 32rpx;
			color: #333333;
			background-color: rgba(255, 255, 255, 0);
		}
	}
	.avatar-box {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 43rpx;
		flex-shrink: 0;
		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.edit {
			position: absolute;
			bottom: 6rpx;
			right: 6rpx;
			width: 37rpx;
			height: 37rpx;
		}
	}

	.info {
		flex: 1;
		overflow: hidden;
		flex-shrink: 1;

		.name {
			font-weight: bold;
			font-size: 44rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;

			> text {
				max-width: 300rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
		.vip {
			width: 124rpx;
			height: 40rpx;
			background: url(../static/my/bg-vip.png);
			background-size: 124rpx 40rpx;
			background-repeat: no-repeat;
			color: #ffffff;
			text-align: right;
			padding-right: 10rpx;
			font-size: 20rpx;
			line-height: 40rpx;
			margin-left: 30rpx;
			&::before {
				z-index: 9999;
			}
		}
		.phone {
			color: #656565;
			font-size: 30rpx;
		}
	}
}

.asset-info {
	border-radius: 16rpx;
	height: 200rpx;
	padding: 40rpx 74rpx 0 74rpx;
	background-color: #ffffff;

	> view:nth-child(1) {
		color: $color-grey;
		margin-bottom: 16rpx;
	}

	.num {
		font-size: 50rpx;
		font-weight: bold;
		margin-right: 40rpx;
	}
	.detail {
		color: $color-primary;
	}

	.btn-charge {
		background-color: #0fb078;
		color: #ffffff;
		width: 200rpx;
		height: 80rpx;
		border-radius: 60rpx;
		box-shadow: 0 0 4rpx 1rpx #0fb078;
		> text {
			font-size: 30rpx;
			display: inline-block;
			transform: skewX(-20deg);
			margin-right: 10rpx;
			padding-left: 10rpx;
		}
	}
}

.banner-wrap {
	min-height: 260rpx;
	margin: 10rpx 0;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.block-card {
	border-radius: 16rpx;
	flex-wrap: wrap;
	background-color: #ffffff;
	height: 690rpx;

	.card-item {
		width: 33.33%;
		height: 33.33%;
		align-items: center;
		color: #656565;
		font-size: 24rpx;
		outline: 1rpx solid #f9f9f9;

		image {
			width: 63rpx;
			height: 63rpx;
			flex-shrink: 0;
			margin-bottom: 35rpx;
		}
	}
}

.cell-card {
	border-radius: 16rpx;
	background-color: #ffffff;
	margin: 30rpx 0;
	overflow: hidden;
	.cell-item {
		padding: 0 30rpx;
		height: 100rpx;
		overflow: hidden;

		> text {
			font-weight: 600;
		}
		.icon {
			width: 45rpx;
			height: 45rpx;
			margin-right: 34rpx;
		}
		.arrow-r {
			width: 16rpx;
			height: 26rpx;
		}
	}
}
.zwyHeight {
	position: relative;
	overflow: hidden;
}

.zwyHeight::before {
	content: '';
	position: absolute;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	width: 140%;
	height: 80rpx;
	left: 140%;
	top: 0;
	bottom: 0;
	margin: auto;
	transform: rotateZ(-45deg);
	animation: isLeft 10s 1.3s infinite;
}

@keyframes isLeft {
	0% {
		left: -140%;
	}

	12% {
		left: 140%;
	}

	100% {
		left: 140%;
	}
}
</style>
